<template>
    <q-dialog v-model="dictDetailVisible" position="right">
        <q-card style="width: 800px; max-width: 50vw; height: 100%">
            <q-table row-key="id" separator="cell" :rows="tableData" :columns="columns" v-model:pagination="pagination"
                :rows-per-page-options="pagination.options" :loading="loading" @request="onRequest">

                <template v-slot:top="props">
                    <q-btn dense color="primary" @click="showAddForm({parentId: parentDict.id})">
                        新增 {{ parentDict.label}} 字典项：
                    </q-btn>
                    <q-space />
                    <q-btn flat round dense :icon="props.inFullscreen ? 'fullscreen_exit' : 'fullscreen'"
                        @click="props.toggleFullscreen" class="q-ml-md" />
                </template>

                <template v-slot:body-cell-status="props">
                    <q-td :props="props">
                        <gqa-dict-show dictName="statusOnOff" :dictCode="props.row.status" />
                    </q-td>
                </template>

                <template v-slot:body-cell-stable="props">
                    <q-td :props="props">
                        <gqa-dict-show dictName="statusYesNo" :dictCode="props.row.stable" />
                    </q-td>
                </template>

                <template v-slot:body-cell-actions="props">
                    <q-td :props="props">
                        <div class="q-gutter-xs">
                            <q-btn dense color="primary" @click="showEditForm(props.row)" label="编辑" />
                            <q-btn dense color="negative" @click="handleDelete(props.row)" label="删除" />
                        </div>
                    </q-td>
                </template>
            </q-table>
            <q-inner-loading :showing="loading">
                <q-spinner-gears size="50px" color="primary" />
            </q-inner-loading>
        </q-card>

        <add-or-edit-dialog ref="addOrEditDialog" @handleFinish="handleFinish" />
    </q-dialog>
</template>

<script>
import addOrEditDialog from './addOrEditDialog'
import { tableDataMixin } from 'src/mixins/tableDataMixin'
import { postAction } from 'src/api/manage'
import GqaDictShow from 'src/components/GqaDictShow'

export default {
    name: 'dictDetailDialog',
    mixins: [tableDataMixin],
    components: {
        addOrEditDialog,
        GqaDictShow,
    },
    data() {
        return {
            dictDetailVisible: false,
            loading: false,
            parentDict: {},
            url: {
                list: 'dict/dict-list',
                add: 'dict/dict-add',
                edit: 'dict/dict-edit',
                delete: 'dict/dict-delete',
                queryById: 'dict/dict-id',
            },
            columns: [
                { name: 'sort', align: 'center', label: '排序', field: 'sort' },
                { name: 'value', align: 'center', label: '字典编码', field: 'value' },
                { name: 'label', align: 'center', label: '字典名称', field: 'label' },
                { name: 'status', align: 'center', label: '状态', field: 'status' },
                { name: 'stable', align: 'center', label: '系统内置', field: 'stable' },
                { name: 'actions', align: 'center', label: '操作', field: 'actions' },
            ],
        }
    },
    methods: {
        show(row) {
            this.dictDetailVisible = true
            this.parentDict = row
            this.getTableData()
        },
        getTableData() {
            this.tableData = []
            this.pagination.rowsNumber = 0
            this.loading = true
            postAction(this.url.list, {
                ...this.queryAllParams,
                parentId: this.parentDict.id,
            })
                .then((res) => {
                    this.pagination.rowsNumber = res.data.total
                    this.tableData = res.data.records
                })
                .finally(() => {
                    this.loading = false
                })
        },
    },
}
</script>